<div id="typography" class="page-layout simple tabbed" fxLayout="column">

    <!-- HEADER -->
    <div class="header accent p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutAlign="center start">
            <div fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-18">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">User Interface</span>
            </div>
            <div class="h1 mt-16">Typography</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content">

        <mat-tab-group dynamicHeight="true">

            <mat-tab label="Headings">

                <typography-headings></typography-headings>

            </mat-tab>

            <mat-tab label="Inline Text Elements">

                <typography-inline-text-elements></typography-inline-text-elements>

            </mat-tab>

            <mat-tab label="Blockquotes & Lists">

                <typography-blockquotes-lists></typography-blockquotes-lists>

            </mat-tab>

            <mat-tab label="Message Boxes">

                <typography-message-boxes></typography-message-boxes>

            </mat-tab>

            <mat-tab label="Helpers">

                <typography-helpers></typography-helpers>

            </mat-tab>

        </mat-tab-group>

    </div>
    <!-- / CONTENT -->

</div>
